@-webkit-keyframes fadeIn {
    0% {
        transform: translate3d(0%, 10%, 0);
        opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        transform: translate3d(0%, 5%, 0);
        opacity: 0; /*中间状态 透明度为0*/
    }
    100% {
        transform: translate3d(0%, 0%, 0);
        opacity: 1; /*结尾状态 透明度为1*/
    }
}

.fadeInBox {
    -webkit-animation-name: fadeIn; /*动画名称*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    -webkit-animation-delay: 0s; /*延迟时间*/
}